<template>
    <div class="register" id="register-app">
        <el-text class="register-title">汽车租赁</el-text>
        <div class="register-box">
            <img class="register-img" src="../assets/image/login.png" />
            <div class="register-form">
                <el-form ref="registerFormRef" style="max-width: 600px" :model="registerForm" status-icon :rules="rules"
                    label-width="auto" class="registerForm">
                    <el-button type="text" style="font-size: 18px;display:flex;margin-left:0;justify-content:left" @click="toLogin"><- 返回登录</el-button>
                    <h2 style="margin-top: 0;">注册</h2>
                    <el-form-item prop="realName">
                        <el-input v-model="registerForm.realName" type="realName" placeholder="昵称" />
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="registerForm.username" type="username" placeholder="账号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="registerForm.password" type="password" placeholder="密码" />
                    </el-form-item>
                    <el-form-item prop="checkPass">
                        <el-input v-model="registerForm.checkPass" type="password" placeholder="再次输入密码" />
                    </el-form-item>
                    <el-form-item prop="identity">
                        <el-input v-model="registerForm.identity" type="identity" placeholder="身份证号" />
                    </el-form-item>
                    <el-form-item prop="address">
                        <el-cascader style="width: 300px;" v-model="registerForm.address" :options="addressOptions" separator="-"
                            placeholder="请选择地址" clearable filterable></el-cascader>
                    </el-form-item>
                    <el-form-item prop="sex">
                        <el-radio-group v-model="registerForm.sex">
                            <el-radio :label="0">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(registerFormRef)">
                            注册
                        </el-button>
                        <el-button @click="resetForm(registerFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { register } from '@/api'
import router from '@/router'
import addressOptions from '@/address.json'
import { FormInstance, FormRules, ElMessage } from 'element-plus'

const registerFormRef = ref<FormInstance>()

const validateUsername = (rule: any, value: any, callback: any) => {
    if (!value.trim()) {
        callback(new Error('账号不能为空'))
    } else {
        callback()
    }
}

const validateRealName = (rule: any, value: any, callback: any) => {
    if (!value.trim()) {
        callback(new Error('昵称不能为空'))
    } else {
        callback()
    }
}

const validateIdentity = (rule: any, value: any, callback: any) => {
    const regex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
    if (!value.trim()) {
        callback(new Error('身份证号不能为空'));
    } else if (!regex.test(value)) {
        callback(new Error('身份证号非法'));
    } else {
        callback();
    }
};

const validatePass = (rule: any, value: any, callback: any) => {
    if (!value.trim()) {
        callback(new Error('密码不能为空'))
    } else {
        if (registerForm.checkPass !== '') {
            if (!registerFormRef.value) return
            registerFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (!value.trim()) {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerForm.password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}

const registerForm = reactive({
    realName: '',
    username: '',
    password: '',
    checkPass: '',
    identity: '',
    sex: 0,
    address: '',
    img: ''
})

const rules = reactive<FormRules<typeof registerForm>>({
    realName: [{ validator: validateRealName, trigger: 'blur' }],
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
    identity: [{ validator: validateIdentity, trigger: 'blur' }],

})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            register(registerForm).then((resp: { data: any; }) => {
                let data = resp.data;
                if (data.code == '50011') {
                    console.log(data);
                    ElMessage({
                        message: data.message,
                        type: 'success'
                    });
                    setTimeout(() => {
                        router.push({ path: '/login' })
                    }, 1000);
                } else {
                    console.log(data);
                    ElMessage({
                        message: data.message,
                        type: 'error'
                    });
                }
            });
        } else {
            ElMessage({
                message: '请再次检查表单',
                type: 'error'
            })
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const toLogin = () => {
  router.push({ path: '/login' })
}

</script>

<style scoped>
.register {
    justify-content: center;
    align-items: center;
    height: 97vh;
    overflow-y: hidden;
    background-color: rgb(237, 237, 237);
}

.register-box{
    display: flex;
    position: absolute;
    left: 10%;
    top: 15%;
}

.register-title{
    position: relative;
    font-size: 50px;
    letter-spacing: 10px;
    font-weight: bolder;
    font-style: italic;
    color: #4971ab;
    top: 20px;
}

.register-form{
    border-radius: 0px 8px 8px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(247, 247, 247);
    width: 400px;
    height: 530px;
    margin-left: 5%;
    margin-top: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 2%;
}


.register-img{
    width: 50%;
    height: 80%;
}

.el-form-item{
    line-height: 40px;
    margin-bottom: 15px;
    width: 300px;
    
}
.el-input{
    max-width: 300px;
    height: 40px;
}
.el-button{
    width: 48%;
    margin: auto;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 为上传区域添加样式 */
.upload-placeholder {
  position: relative;
  width: 50px; /* 自定义宽度，根据需求调整 */
  height: 50px; /* 自定义高度，应与宽度相同以形成正方形 */
  border: 1px solid #000; /* 黑色边框 */
  border-radius: 50%; /* 边框圆角，保持直角以维持方形外观 */
  overflow: hidden; /* 隐藏超出边界的图片部分 */
  display: flex; /* 添加Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  left: 240%;
}

.square-image {
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    /* 保持图片原始宽高比 */
    object-fit: contain; /* 更改此属性为contain以保持原图比例 */
    /* 确保图片内容居中 */
    object-position: center;
    
    /* 居中显示 */
    display: block;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 !important; /* 确保没有圆角 */
}

/* 当没有图片时，确保加号图标居中显示（这部分可能不需要额外设置，因为已经通过Flex布局居中） */
/*.upload-placeholder .el-icon {
  // 如果之前设置导致问题，可以尝试移除此部分，仅依赖Flex布局的居中效果
}*/

/* 可选：调整加号图标的样式 */
.el-icon {
  font-size: 48px; /* 根据需要调整图标大小 */
  color: #909399; /* 图标颜色，可根据设计调整 */
}

</style>